<template>
  <!-- 点位配置 -->
  <div class="ponterm">
    <div class="fromed">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="区域名称：" prop="qymc">
                  <el-select
                    v-model="formData.qymc"
                    placeholder
                    clearable
                    :style="{ width: '100%' }"
                    @change="getDwpzSsjgmc"
                  >
                    <el-option
                      v-for="(item, index) in dwpzSsqymcList"
                      :key="index"
                      :label="item.QYMC"
                      :value="item.QYID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="间隔名称：" prop="jgmc">
                  <el-select
                    v-model="formData.jgmc"
                    placeholder
                    clearable
                    :style="{ width: '100%' }"
                    @change="getDwpzSssbmc"
                  >
                    <el-option
                      v-for="(item, index) in dwpzSsjgmcList"
                      :key="index"
                      :label="item.JGMC"
                      :value="item.JGID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="设备名称：" prop="sbmc">
                  <el-select
                    v-model="formData.sbmc"
                    placeholder
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in dwpzSssbmcList"
                      :key="index"
                      :label="item.SBMC"
                      :value="item.SBID"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="15">
              <el-col :span="24">
                <div class="fromed-btn">
                  <el-button type="primary" @click="search">查询</el-button>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <div class="tree">
        <el-tree
          ref="tree"
          :data="treedata"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          icon-class="custom"
        ></el-tree>
      </div>
    </div>
    <div class="task-newAddm-btn">
      <el-button type="primary" @click="next" class="centerbox">确认</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tree } from "element-ui";

@Component
export default class ponterm extends Vue {
  @Prop() datas!: any[];
  public formData = {
    qymc: "",
    jgmc: "",
    sbmc: "",
  };
  public rules = {
    qymc: [],
    jgmc: [],
    sbmc: [],
  };

  public dwpzSsqymcList: any[] = [];
  // 区域下拉
  getDwpzSsqymc() {
    var params = {
      bdzId: this.datas[0].BDZID,
    };
    (this as any).$services
      .getDwpzSsqymc({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.dwpzSsqymcList = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  public dwpzSsjgmcList: any[] = [];
  // 间隔下拉
  getDwpzSsjgmc() {
    var params = {
      bdzId: this.datas[0].BDZID,
      qyId: this.formData.qymc,
    };
    (this as any).$services
      .getDwpzSsjgmc({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.dwpzSsjgmcList = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  public dwpzSssbmcList: any[] = [];
  // 设备下拉
  getDwpzSssbmc() {
    var params = {
      bdzId: this.datas[0].BDZID,
      qyId: this.formData.qymc,
      jgId: this.formData.jgmc,
    };
    (this as any).$services
      .getDwpzSssbmc({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.dwpzSssbmcList = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 树图
  public treedata: any[] = [];
  public defaultProps = {
    label: "name",
    children: "children",
  };
  $refs!: {
    tree: Tree;
  };
  activeCD = [];

  initBdzDwTree() {
    var params = {
      bdzId: this.datas[0].BDZID,
      xjlx: this.datas[0].XJLX,
    };
    (this as any).$services
      .initBdzDwTree({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.treedata = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 节点点击事件
  handleNodeClick(data: any) {
    if (!data.children) {
      // console.log(data);
      this.activeCD.push(data.id);
    }
  }
  // 还有一个最末节点的接口
  // 查询按钮（过滤）
  public search() {
    // if (this.formData.sbmc == "") {
    //   this.$message({
    //     type: "warning",
    //     message: "选择设备查询定位设备树",
    //   });
    // } else {
    //   let val = this.formData.sbmc;
    //   let tree = this.$refs.tree;
    //   console.log(tree);
    //   if (tree) {
    //     tree.filter(val);
    //   }
    // }
  }
  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
  next() {
    this.$emit("close");
  }
  mounted() {
    // 区域下拉框
    this.getDwpzSsqymc();
    // 树图
    this.initBdzDwTree();
  }
}
</script>

<style lang="scss" scoped>
.ponterm {
  width: 100%;
  height: 500px;
  padding: 0.24rem 0;
  .fromed {
    width: 100%;
    height: 100%;
    padding: 0.25rem 0;
    .tree {
      height: 240px;
      overflow-y: auto;
    }
  }

  .task-newAddm-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>

